As most web developers are aware, there’s an annoying lack of support for the full screen api in Safari on iOS. However most popular video sites such as YouTube and Vimeo have a way of faking it by allowing the user to toggle between playing the video inline (with the playsinline attribute I assume) and playing the video in the native iOS player (like when videos don’t use playsinline).

I made a simple script that I thought would do this, but it doesn’t work reliably and I’m sure there’s a better way to implement it. It goes like this:

    var video = document.getElementById('video');

    function toggleFullScreen() {
    video.pause();
    video.hasAttribute('playsinline') ? video.removeAttribute('playsinline') : video.setAttribute('playsinline', '');
    video.play();
  }

My question is: does anyone know how these sites do it? And is there a better way than toggling playsinline?